<template>
	<view class="container">
		<!-- #ifdef H5 -->
		<uni-header></uni-header>
		<!-- #endif -->

		<view class="com-box">
			<view class='appraise-title'>
				<view>宝贝评分</view>
				<view class="appraise-star-view">
					<radio-group @change="radioChange">
						<label v-for="(item, index) in type" :key="item.value" style="margin-right: 10px;">
							<radio :value="item.value" :checked="index === current">{{item.text}}</radio>
						</label>
					</radio-group>
				</view>
			</view>
			<view class="appraise-body">
				<textarea placeholder="分享你的经验吧！" v-model="content" class="appraise-textare"></textarea>
			</view>
			<view class="appraise-body appraise-uploader">
				<view class="ttl">晒图片</view>
				<uni-upimg @change="getImageInfo" :upimg_preview="serviceArr" :upload_count="3"></uni-upimg>
			</view>

			<button type="primary" class="add-btn" @click="send">提交</button>
		</view>

		<!-- #ifdef H5 -->
		<uni-footer></uni-footer>
		<!-- #endif -->
	</view>
</template>

<script>
	import uniUpimg from '@/components/uni-upimg.vue'
	import uniHeader from '@/components/h5/uni-header.vue'
	import uniFooter from '@/components/h5/uni-footer.vue'
	export default {
		components: {
			uniUpimg,
			uniHeader,
			uniFooter
		},
		data() {
			return {
				id: '',
				type: [{
					value: "1",
					text: '好评'
				}, {
					value: "2",
					text: '中评'
				}, {
					value: "3",
					text: '差评'
				}],
				current: 0,
				serviceArr: [],
				content: ""
			}
		},
		onLoad(option) {
			this.id = option.id
		},
		methods: {
			getImageInfo(e) {
				this.serviceArr = e
			},
			radioChange(e) {
				for (let i = 0; i < this.type.length; i++) {
					if (this.type[i].value === e.target.value) {
						this.current = i;
						break;
					}
				}
			},
			send() { //发送反馈
				this.$api.request('/userOrder/finishOrder', {
					orderId: this.id,
					starsNum: this.current + 1,
					content: this.content,
					commentPictureArray: this.serviceArr
				}).then(res => {
					this.$api.msg('评价成功！')
					setTimeout(() => {
						this.$api.prePage().loadData('refresh')
						uni.navigateBack()
					}, 500)
				})
			}
		}
	}
</script>

<style lang="scss">
	/*问题反馈*/
	.appraise-title {
		display: flex;
		flex-direction: row;
		padding: 20upx $base-row-spacing;
		font-size: $base-font-base;
		color: $base-color-base;
		line-height: 48upx;
		background-color: #FFFFFF;
		border-top: 1upx solid #f0f0f0;
	}

	.appraise-star-view {
		display: flex;
		padding-left: 20upx;
		height: 48upx;
	}

	.appraise-star-view .uni-label-pointer {
		margin-right: 20upx;
	}

	.appraise-body {
		background: #fff;
		border-top: 1upx solid #f0f0f0;
	}

	.appraise-textare {
		height: 200upx;
		font-size: 28upx;
		line-height: 34upx;
		width: 100%;
		box-sizing: border-box;
		padding: 20upx 30upx 0;
	}

	.appraise-input {
		font-size: 34upx;
		height: 50upx;
		min-height: 50upx;
		padding: 15upx 20upx;
		line-height: 50upx;
	}

	.appraise-uploader {
		padding: 0 $base-row-spacing 20upx;
	}

	.appraise-uploader .ttl {
		font-size: $base-font-base;
		color: $base-color-base;
		line-height: 80upx;
	}

	/* #ifdef H5 */
	@media screen and (min-width: 750px) {
		.com-box {
			padding-top: 20px;
		}

		/*问题反馈*/
		.appraise-title {
			padding: 20px 30px;
			font-size: 16px;
			line-height: 40px;
			border-top: 1px solid #f0f0f0;
		}

		.appraise-star-view {
			padding-left: 20px;
			height: 40px;
		}

		.appraise-star-view .uni-label-pointer {
			margin-right: 20px;
		}

		.appraise-body {
			border-top: 1px solid #f0f0f0;
		}

		.appraise-textare {
			height: 200px;
			font-size: 16px;
			line-height: 40px;
			padding: 20px 30px 0;
		}

		.appraise-input {
			font-size: 16px;
			height: 40px;
			min-height: 40px;
			padding: 15px 20px;
			line-height: 40px;
		}

		.appraise-uploader {
			padding: 10px 30px 20px;
		}

		.appraise-uploader .ttl {
			font-size: 16px;
			line-height: 40px;
		}
	}

	/* #endif */
</style>
